import { back, uploadFilesList } from "@/helper/utils";
import {
  addPlatform,
  cooperationPlatformDetail,
} from "@/services/entities/all";
import { View, Text } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useEffect, useMemo, useState } from "react";
import { AtImagePicker, AtInput } from "taro-ui";
import "./index.scss";
const AddPlatform = () => {
  const router = useRouter();
  const { params } = router;
  const { type, id } = params;

  const [form, setForm] = useState<any>({
    name: "",
    banner: [],
    files: [],
  });
  const isAdd = useMemo(() => {
    return type !== "2";
  }, [type]);

  useEffect(() => {
    if (!isAdd) {
      cooperationPlatformDetail({ id: id }).then((res: any) => {
        console.log("cooperationPlatformDetail", res);
        setForm({
          name: res.name,
          banner: [res.imageUrl],
          files: [{ url: res.imageUrl }],
        });
      });
    }
  }, [isAdd]);

  const onChange = (key, value, nextValue?) => {
    const temp = { ...form };
    temp[key] = value;
    if (key === "banner") {
      temp["files"] = nextValue;
    }
    console.log(temp);
    setForm(temp);
  };

  const chooseImage = (value: any) => {
    uploadFilesList(value).then((res) => {
      onChange(
        "banner",
        res.map((item) => item.data),
        value
      );
    });
  };

  const submit = () => {
    const result: any = {
      describes: "2323",
      imageUrl: form.banner[0],
      name: form.name,
    };
    if (!isAdd) {
      result.id = id;
    }
    addPlatform(result).then(() => {
      back();
    });
  };
  return (
    <View className="bg-page">
      <View className="flex-column">
        <Text className="mg-tb-24 ml-22 fs-24 lh-36 cl-A4A4A4">
          添加商家基本信息
        </Text>
        <AtInput
          name="shopName"
          title="平台名称"
          type="text"
          value={form.name}
          placeholder="请输入平台名称"
          onChange={(value) => {
            onChange("name", value);
          }}
        />
        <Text className="mg-tb-24 ml-22 fs-24 lh-36 cl-A4A4A4">
          添加图片&视频信息
        </Text>
        <View className="flex-column pl-4 pr-24 pd-tb-28 border-box bg-ffffff">
          <Text className="mb-28 pl-20 border-box fs-28 lh-36 cl-848484">
            上传商家banner图片
          </Text>
          <AtImagePicker
            files={form.files}
            count={9}
            multiple={true}
            onChange={(files) => {
              chooseImage(files);
            }}
          ></AtImagePicker>
        </View>
      </View>
      <View className="bottom pd-20  dis-flex align-center border-box">
        <View
          className="flex-1 flex-center pd-tb-20 border-box bg-ffffff br-8 fs-28 lh-38 cl-848484"
          onClick={() => {
            back();
          }}
        >
          取消
        </View>
        <View className="empty"></View>
        <View
          className="flex-1 flex-center pd-tb-20 border-box bg-007DDB br-8 fs-28 lh-38 cl-white"
          onClick={submit}
        >
          提交
        </View>
      </View>
    </View>
  );
};

export default AddPlatform;
